<template>
  <div class="detail-container">
    <SubscribeTips v-if="isShowSubTips" @close="isShowSubTips = false" />
    <!-- 简介 -->
    <Synopsis
      :id="portfolioId"
      title="股池简介"
      :content="description"
      :videoUrl="videoUrl"
    ></Synopsis>
    <section class="detail-gpc">
      <div class="title">{{ poolName }}</div>
      <atom-tabs v-model="activeTab" type="card" ref="tabs" sticky>
        <atom-tab v-for="pool in pools" :title="pool.name" :key="pool.key">
          <component
            :is="pool.component"
            :showTackpoolPop="showTackpoolPop"
            @hasShow="showTackpoolPop = false"
            @openSubPopup="openSubPopup"
          ></component>
        </atom-tab>
      </atom-tabs>
    </section>
    <!-- 客服组件 -->
    <customer-service></customer-service>
    <!-- 订阅 -->
    <Subscribe
      ref="subscribeRef"
      :checkTrackPool="true"
      :projectId="projectId"
      :isHome="false"
      @setActiveTab="setActiveTab"
    ></Subscribe>
  </div>
</template>

<script>
import { POOL_TABS } from '@/config/portfolio';
import CustomerService from '@/components/common/CustomerService.vue';
import Synopsis from '@/components/Synopsis.vue';
import Subscribe from '@/components/servicePack/Subscribe.vue';
import StrategyPool from '@/components/servicePack/StrategyPool.vue';
import TrackPool from '@/components/servicePack/TrackPool.vue';
import SubscribeTips from '@/components/detail/SubscribeTips.vue';
import tools from '@/lib/tools.js';
import { reqPortfolioInfo } from '@/apis/portfolio.api.js';

export default {
  components: {
    Subscribe,
    Synopsis,
    StrategyPool,
    CustomerService,
    TrackPool,
    SubscribeTips,
  },
  data() {
    return {
      pools: Object.freeze(POOL_TABS),
      // 股池id
      portfolioId: '',
      // 项目订阅id
      projectId: 0,
      // 描述
      description: '',
      // 股池名称
      poolName: '股票池',
      // 视频id
      videoUrl: '',
      // 显示跟踪池定制弹窗
      showTackpoolPop: false,
      // 当前选中tab
      activeTab: 0,
      // 是否展示弹框提示
      isShowSubTips: false,
    };
  },
  methods: {
    // 首次定制自动打开订阅弹框
    openSubPopup() {
      if (this.$refs.subscribeRef) {
        this.$refs.subscribeRef.openSub();
      }
      this.isShowSubTips = true;
    },
    setActiveTab(targetTab) {
      this.activeTab = targetTab;
      // 手动调用滑块样式 - 组件bug
      this.$refs.tabs.setSliderStyle();
      this.$nextTick(() => {
        this.showTackpoolPop = true;
      });
    },
    getPageInfo(portfolioId) {
      const params = { portfolio_id: portfolioId };
      reqPortfolioInfo(params)
        .then(res => {
          if (res.status_code) {
            throw new Error(
              `servicePack/Details.vue中的getPageInfo的status_code非0，portfolio_id为${portfolioId}，响应值为${JSON.stringify(
                res
              )}`
            );
          }
          const data = res.data;
          this.projectId = data.project_id || 0;
          const { description, course_link } = data?.ext_info || {};
          this.description = description || '';
          this.videoUrl = course_link || '';
          tools.setTitle(data.name || '股票池');
        })
        .catch(err => {
          tools.errorReport({
            name: `servicePack/Details.vue的getPageInfo方法错误。${err.name}`,
            message: `入参为${JSON.stringify(params)}。${err.message}`,
            stack: err.stack,
          });
        });
    },
  },
  created() {
    this.portfolioId = window.getParam('portfolio_id');
    this.activeTab = +window.getParam('activeTab') || 0;
    this.getPageInfo(this.portfolioId);
  },
};
</script>

<style lang="less" scoped>
/deep/ .atom-sticky--fixed {
  padding: 0 12px;
}
// 吸顶
/deep/ .atom-tabs__wrap-container {
  padding-top: 8px;
  padding-bottom: 8px;
}

/deep/ .atom-sticky--fixed .atom-tabs__wrap-container {
  background: var(--bg-color-2);
}
.detail-container {
  background: var(--bg-color-1);
  padding: 8px 6px;
}
.detail-gpc {
  position: relative;
  background: var(--bg-color-2);
  border-radius: 6px;
  padding: 12px 10px;
  margin-bottom: 8px;
  /deep/ .insustry_layout_wrapper_no_data {
    width: 93.6%;
    background-color: transparent;
  }
  .title {
    font-size: 18px;
    line-height: 22px;
    font-weight: 600;
    color: var(--text-1);
  }
}
</style>
